<template>
  <div style="width: 300px;padding-top: 10px">
    <el-form ref="form" :model="StudentInfo" label-width="80px">
      <el-form-item label="学生姓名">
        <el-input v-model="StudentInfo.name"></el-input>
      </el-form-item>

      <el-radio-group v-model="StudentInfo.gender">
        <el-radio label="男">男</el-radio>
        <el-radio label="女">女</el-radio>
      </el-radio-group>

      <el-form-item label="爱好">
        <el-checkbox-group v-model="hobbyArray">
          <el-checkbox label="美食" name="type"></el-checkbox>
          <el-checkbox label="篮球" name="type"></el-checkbox>
          <el-checkbox label="羽毛球" name="type"></el-checkbox>
          <el-checkbox label="兵乓球" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    export default {
        name: "Student",

        data(){
            return{
              hobbyArray:[],
              StudentInfo: {
                name: '',
                gender: '',
                hobbies: ''
              },
            }
        },
      methods:{
        onSubmit() {
          if(this.hobbyArray.length == 0){
            this.StudentInfo.hobbies ={}
          }else if(this.hobbyArray.length == 1){
            this.StudentInfo.hobbies = this.hobbyArray[0]
          }else if(this.hobbyArray.length > 1){
            this.StudentInfo.hobbies = this.hobbyArray.join(',')
          }
          console.log('submit的数据!',this.StudentInfo);
        }
      }
    }
</script>

<style scoped>

</style>
